﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>控制大屏</title>
  <!-- npm -->
  <!-- element组件库 -->
  <!-- /npm -->
  <!--网站logo-->
  <link rel="shortcut icon" href="./asset/logo.png">
  <!-- 样式表 -->
  <!-- 引入 layui.css -->
  <link href="https://unpkg.com/layui@2.8.18-rc.1/dist/css/layui.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/floor-select.css">
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  <!-- js -->
  <!-- 引入 layui.js -->
  <script src="https://unpkg.com/layui@2.8.18-rc.1/dist/layui.js" defer></script>


  <script src="./js/iconfont.js" defer></script>
  <script src="./js/map_data_11.js" defer></script>
  <script src="./js/floor-select.js" defer></script>
  <script src="https://unpkg.com/spacingjs" defer=""></script>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/china.js"></script>
  <script type="text/javascript" src="js/map.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
  <script src="./js/index.js" defer></script>
  <script src="./js/UI.js" defer></script>
</head>

<body>
  <div class="head clearfix">
    <h1 class="pulll_left">八 府 巡 安 控 制 大 屏</h1>
    <div class="menu pulll_left">
      <ul>
        <li><a href="http://139.159.253.19/datashow.html">数据大屏</a></li>
      </ul>
    </div>
    <div class="menu menu2 pulll_left" id="BigCommand">
      <ul>

        <li><a data-value="start" style="cursor: pointer !important;">开始巡查</a></li>
        <li><a data-value="pause" style="cursor: pointer !important;">暂停巡查</a></li>
        <li><a data-value="stop" style="cursor: pointer !important;">结束巡查</a></li>
        <!-- <li><a data-value="show" style="cursor: pointer !important;">开启视频流识别</a></li>
        <li><a data-value="stop-show" style="cursor: pointer !important;">关闭视频流识别</a></li> -->
        <!-- <li><a href="">导航标题</a></li>
        <li><a href="">导航标题</a></li>
        <li><a href="">导航标题</a></li> -->
      </ul>
    </div>
    <!-- 时间 -->
    <div class="time" id="showTime">2018/6/12 17:00:12</div>

  </div>
  <div class="mainbox" id="mainbox">
    <ul class="clearfix nav1">
      <!-- 左 -->
      <li style="width: 22%" class="big-left-li" id="big-left-li">
        <div class="box" id="box-left-top">
          <div class="tit">楼层巡查信息</div>
          <div class="boxnav" style="height: 330px">
            <div class="yqlist">
              <ul class="clearfix">
                <li>
                  <div class="yq" id="yq">17</div>
                  <span>巡查楼层数</span>
                </li>
                <li>
                  <div class="yq">8</div>
                  <span>巡查车数量</span>
                </li>
                <li>
                  <div class="yq">145</div>
                  <span>监控数量</span>
                </li>
                <li>
                  <div class="yq">13</div>
                  <span>告警数量</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="box" id="box-left-down">
          <div class="tit">
            <span>指令集</span>
            <span>
              <div type="button" class="layui-btn layui-btn-primary " lay-on="test-offset-l">
                <i class="layui-icon layui-icon-time" style="font-size: 30px; color: #1E9FFF;"></i>
              </div>

            </span>

          </div>
          <div class="boxnav">
            <div class="" style=" height: 406px;display: none;" id="echart2">
            </div>
            <!-- 指令集合 -->
            <div id="instructions-box-container" style="height: 406px;">

              <ul class="instructions-box" id="instructions-elevator" data-drop="move">

                <li data-effect="copy" draggable="true" style="background-color: #14e144;">拖拽项目1</li>
                <li data-effect="copy" draggable="true" style="background-color: #14e144;">拖拽项目2</li>
                <li data-effect="copy" draggable="true" style="background-color: #14e144;">拖拽项目3</li>
              </ul>
              <ul class="instructions-box" id="instructions-dormitory" data-drop="move">
                <li data-effect="copy" draggable="true" style="background-color: #0ecfd9;">拖拽项目4</li>
                <li data-effect="copy" draggable="true" style="background-color: #0ecfd9;">拖拽项目5</li>


              </ul>
            </div>
          </div>
        </div>
      </li>
      <!--中-->
      <li style="width: 56%" class="big-center-li" id="big-center-li">
        <!--中间上面-->
        <div class="box" id="box-center-top">
          <div class="boxnav mapc" style="height: 480px; position: relative">
            <!--原先的地图-->
            <div class="map" id="map" style="display:none"></div>
            <!--自己绘制的地图:小车运动轨迹-->
            <div class="car-map" id="car-map-11" style="width: 100%; height: 100%; transition: 0.4s;">
            </div>
          </div>
          <!--中间上面-楼层选择-->
          <div class="container-floor-select" style="height: 60px;">
            <div class="btn floor-btn" id="last-floor">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangzuo"></use>
              </svg>
            </div>
            <div class="slider-container">
              <ul class="slider">
              </ul>
            </div>
            <div class="btn floor-btn" id="next-floor">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangyou"></use>
              </svg>
            </div>
          </div>
        </div>
        <!--中间下面-->
        <div class="box" id="box-center-down">
          <div class="tit" id="Spirit-Island">
            <!-- 暂时不显示 -->
            <div class="title_" style="display: none;">
              <span>灵动岛</span>
            </div>
            <div class="instruction">
              <span>发送台</span>
            </div>


            <div class="floor-pop-down">
              <div class="floor-preview"></div>
              <span class="pop-down-icon">
                <svg class="icon" aria-hidden="true">
                  <!-- #icon-xiangshangshouqi-xianxingyuankuang  上箭头-展开 -->
                  <!--#icon-xiangxiazhankai-xianxingyuankuang  下箭头-收器-->
                  <use xlink:href="#icon-xiangxiazhankai-xianxingyuankuang"></use>
                </svg>
              </span>
            </div>
          </div>
          <!-- 中下-内容 -->
          <!-- 暂不显示：原先图表 -->
          <div class="boxnav" style="height: 250px; display: none;" id="echart3"></div>
          <!-- 自建图表：消息队列发送台 -->
          <div class="boxnav" style="height: 250px; " id="instruction-queue-container">
            <ul id="instruction-queue" data-drop="copy"
              style="background: url(./asset/queue_sent_background.png); background-size: cover; background-position: center;">
            </ul>

            <div data-value="submit" id="queue-btn-submit" style="display: none;">提交</div>
          </div>
        </div>
      </li>
      <!--右-->
      <li style="width: 22%" class="big-right-li" id="big-right-li">
        <div class="box" id="box-right-top">
          <div class="tit">操控对象</div>
          <div class="boxnav" id="echart4" style="height: 200px;display: none;"></div>
          <div class="boxnav" id="echart8"
            style="height: 200px;background:url(./asset/car.png);background-size:contain;background-repeat: no-repeat; background-position-x: center ;background-position-y: center;">
          </div>
        </div>
        <div class="box" id="box-right-center">
          <div class="tit">巡查设备情况</div>
          <div class="boxnav" style="height: 250px" id="echart5"></div>
        </div>
        <div class="box" id="box-right-down">
          <div class="tit">监控设备情况</div>
          <div class="boxnav" style="height: 250px; display:none;" id="echart6"></div>
          <div class="boxnav" style="height: 250px; " id="echart7"></div>

        </div>
      </li>
    </ul>

    <script>
      //每1s刷新显示时间
      var t = null
      t = setTimeout(time, 1000) //开始运行

      function time() {
        clearTimeout(t) //清除定时器
        dt = new Date()
        var y = dt.getFullYear()
        var mt = dt.getMonth() + 1
        var day = dt.getDate()
        var h = dt.getHours() //获取时
        var m = dt.getMinutes() //获取分
        var s = dt.getSeconds() //获取秒
        //如果是0-9,需要添加一个0来补全
        mt = (mt < 10) ? "0" + mt : mt;
        day = (day < 10) ? "0" + day : day;
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        document.getElementById('showTime').innerHTML =
          y + '/' + mt + '/' + day + ' ' + h + ':' + m + ':' + s + ''
        t = setTimeout(time, 1000) //设定定时器，循环运行
      }
    </script>
    <script>
      //批量添加楼层
      var floor_container = document.querySelector(".slider");
      var floorNum = 17;
      for (var i = 1; i <= floorNum; i++) {
        var li = document.createElement("li");
        li.innerHTML = i + "楼";
        li.setAttribute("class", "floor");
        li.setAttribute("id", "floor-" + i);
        floor_container.appendChild(li);
      }
    </script>
  </div>
</body>
<!-- <script>
  var map = L.map('car-map-11').setView([55.505, -0.7], 9);
  var bounds = [
    [50.42, -0.30],
    [50.57, 0.22]
  ];
  map.fitBounds(bounds);

  var customImageUrl = './asset/map.jpg';

  L.imageOverlay(customImageUrl, bounds).addTo(map);

  map.attributionControl.addAttribution('11楼平面循迹');

  var elevatorMarker = L.marker([50.517, -0.1]).addTo(map)
    .bindPopup('电梯厅')
    .openPopup();

  var anotherMarker = L.marker([50.517, -0.15]).addTo(map)
    .bindPopup('另一个标记')
    .openPopup();

  // 添加连线
  var latlngs = [elevatorMarker.getLatLng(), anotherMarker.getLatLng()];
  var polyline = L.polyline(latlngs, {
    color: 'blue'
  }).addTo(map);
</script> -->

</html>